<script setup>
import  { tool }  from "../tool/index"
import img from "../class/img/logo_b.png"
import { ref,inject, onMounted } from "vue";
import md5 from 'js-md5'
import { useRouter } from "vue-router"
import { useStore } from "vuex"
const commit = useStore()
// 创建 store 
const store = inject('store')
const router = useRouter()
var account = ref("")
var password = ref("")
var tip = [{
    title: "账号正确",
    type: "info",
    description: "但是登录不成功，请检查密码是否正确"
}, {
    title: "账号错误",
    type: "error",
    description: "请检查账号是否正确"
}, {
    title: "登录成功",
    type: "success",
    description: "正在跳转，请稍后"
}]
var tips = ref()
function ifStore(){
    const user = store.state.user.id
    if(user!=null){
        router.push("/")
    }
}
// 查询账号
async function SearchAccount() {
    try {
        const data = {
            key: "Search",
            columns: ["username"],
            data: {
                OpLike: false,
                key: ["username"],
                value: [account.value]
            }
        }
        const response = await tool.axiosApi("user", data, "get")
        if (response.data[0].username === account.value) {
            return true
        } else {
            return false
        }
    } catch (err) {
        return false
    }
}
// 查询密码
async function SearchPassword() {
    const md5Pas = md5(password.value)
    try {
        const data = {
            key: "Search",
            data: {
                OpLike: false,
                key: ["username", "password"],
                value: [account.value, md5Pas]
            }
        }
        const response = await  tool.axiosApi("user", data, "get")
        if (response.count != 0) {
            return response.data[0]
        } else {
            return false
        }
    } catch (err) {
        return false
    }
}
// 逻辑登录判断
async function login() {
    try {
        const Account = await SearchAccount()
        if (Account) {
            const Password = await SearchPassword()
            if (Password) {
                tips.value = [tip[2]]
                try {
                    commit.commit("userAdd", Password)
                    await router.push("/")
                } catch (err) {
                    console.error(err)
                }
            } else {
                tips.value = [tip[0]]
            }
        } else {
            tips.value = [tip[1]]
        }
    } catch (error) {

    }
}
function goRegister() {
    router.push("/register")
}
onMounted(()=>{
    ifStore()
})
</script>
<template>
    <div class="login">
        <div class="form">
            <el-image :src="img" fit="" />
            <el-divider content-position="left"> Welcome to my blog </el-divider>
            <el-form label-position="top">
                <el-form-item label="账号：">
                    <el-input clearable v-model="account" placeholder="账号输入" />
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="password" type="password" show-password placeholder="密码输入" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="login()">登录</el-button>
                    <el-button type="primary" @click="goRegister()">前往注册</el-button>
                </el-form-item>
                <el-alert v-for="item in tips" :title="item.title" :type="item.type" :description="item.description"
                    show-icon :closable="false" />
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.login {
    display: flex;
    width: 100%;
    padding: 20px 0px 15px 50px;
    background-image: url("../class/img/lt.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.form {
    height: 550px;
    border-radius: 15px;
    text-align: center;
    padding: 30px;
    background-color: rgb(255, 255, 255);
    width: 400px;
}

.el-image {
    width: 50%;
}

.welcome {
    margin: auto;
    position: absolute;
    font-weight: bolder;
    font-size: 25px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 15px;
    display: inline-block;
    color: aliceblue;
}
</style>